<template>
  <div>
    <!--    <el-container>
          <el-main class="head-card">
            <el-card>
              <div slot="header">
                <span class="text">费用管理</span>
              </div>
              <div>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100% "
                >
                  <el-table-column v-if="false" prop="cid" label="班级ID" width="150">
                    <template slot-scope="scope">
                      {{ scope.row.cid ? scope.row.cid :'暂无' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="className" label="班级名称" width="150">
                    <template slot-scope="scope">
                      {{ scope.row.className ? scope.row.className :'暂无' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="baseCost" label="基本费用" width="180">
                    <template slot-scope="scope">
                      {{ scope.row.baseCost ? scope.row.baseCost :'暂无' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="dinnerCost" label="晚餐费用(可选)" width="150">
                    <template slot-scope="scope">
                      {{ scope.row.dinnerCost ? scope.row.dinnerCost :'暂无' }}
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" @click="handleClick(scope.$index,scope.row)">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  :current-page="page.pageNum"
                  :total="page.totalSize"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-card>
          </el-main>

        </el-container>-->
    <el-dialog
      title="确认信息"
      :visible.sync="editDinnerCostConfirmVisible"
      width="30%">
      <span>是否将晚餐费用设置为￥{{schoolInfo.dinnerCost}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDinnerCostConfirmVisible = false">取 消</el-button>
    <el-button type="primary" @click="dinnerCostModify">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog title="编辑费用信息" :visible.sync="editDialogFormVisible">
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px" style="width: 500px "
               label-position="left">
        <el-form-item label="基本费用" prop="baseCost">
          <el-input v-model="editForm.baseCost"/>
        </el-form-item>
        <el-form-item label="晚餐费用" prop="dinnerCost">
          <el-input v-model="editForm.dinnerCost"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="editDialogFormVisible = false;resetForm('editForm')">取 消</el-button>
          <el-button type="primary" @click.native="editSubmitForm()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-card style="width: 300px; margin-left: 25px; margin-top: 25px">
      <el-form style="padding-left: 25px">
        <el-form-item label="学 年">
          <el-date-picker
            v-model="schoolInfo.schoolYear"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学 期">
          <el-select v-model="schoolInfo.schoolTerm" placeholder="请选择">
            <el-option
              v-for="item in terms"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="updateYearTerm">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-form ref="schoolInfo" :model="schoolInfo" :rules="rules2" style="padding: 25px" :inline="true">
      <!--      <span style="padding-left: 25px">晚餐费用</span>-->
      <el-form-item label="晚餐费用" prop="dinnerCost">
        <el-input v-model="schoolInfo.dinnerCost" placeholder="请输入晚餐费用" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="setCost">修改</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {getClass} from '../../../api/class'
  import {setCost} from '../../../api/class'
  import {getIntroduction, updateDinnerCost, updateYearAndCost} from '../../../api/school'

  export default {
    name: 'Fee',
    data() {
      var valiNumberPass1 = (rule, value, callback) => { // 包含小数的数字
        const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
        if (value === '') {
          callback(new Error('请输入费用'))
        } else if (!reg.test(value)) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      }
      var valiNumberPass2 = (rule, value, callback) => {
        const reg = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/
        if (value === '') {
          callback(new Error('请输入费用'))
        } else if (!reg.test(value)) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      }
      return {
        terms: [{
          value: 1,
          label: '春季班'
        }, {
          value: 2,
          label: '夏季班'
        }, {
          value: 3,
          label: '秋季班'
        }, {
          value: 4,
          label: '冬季班'
        }],
        schoolInfo: {
          dinnerCost: 0,
          schoolYear: '2019',
          schoolTerm: '0'
        },
        editDinnerCostConfirmVisible: false,
        editDialogFormVisible: false,
        cid: '',
        page: {
          pageNum: 1,
          pageSize: 10,
          totalPage: 0,
          totalSize: 0
        },
        tableData: [],
        editForm: {
          baseCost: '',
          // materialCost: '',
          dinnerCost: ''
        },
        rules: {
          baseCost: [
            {required: true, validator: valiNumberPass2, trigger: 'blur'}
          ],
          // materialCost: [
          //   { required: true, validator: valiNumberPass1, trigger: 'blur' }
          // ],
          dinnerCost: [
            {required: true, validator: valiNumberPass2, trigger: 'blur'}
          ]
        },
        rules2: {
          dinnerCost: [
            {required: true, validator: valiNumberPass2, trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.getAllClass()
      this.getSchoolInfo()
      console.log(this.global.picBaseUrl)
    },
    methods: {

      updateYearTerm() {
        updateYearAndCost({
          year: this.schoolInfo.schoolYear,
          term: this.schoolInfo.schoolTerm
        }).then(res => {
          this.$message.success('修改成功');
        }).catch(err => {
          this.$message.error('修改失败')
        })
      },
      getSchoolInfo() {
        getIntroduction().then(res => {
          this.schoolInfo = res.data;
          this.schoolInfo.schoolYear = res.data.schoolYear + "";
        })
      },
      handleCurrentChange(val) {
        this.page.pageNum = val
        this.getAllClass()
      },
      getAllClass() {
        getClass({
          classState: 0,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }).then(res => {
          this.tableData = res.data.list
          this.page = res.data.page
          // this.$message.success('请求班级列表成功')
        })
          .catch(err => {
            this.$message.error('请求班级列表失败！')
          })
      },
      setCost() {
        this.editDinnerCostConfirmVisible = true
      },
      dinnerCostModify() {
        updateDinnerCost({
          dinnerCost: this.schoolInfo.dinnerCost
        }).then(res => {
          this.$message.success('修改成功');
          this.editDinnerCostConfirmVisible = false
        }).catch(err => {
          this.$message.error('修改失败')
        })
      },
      setAllCost() {
        setCost({
          baseCost: this.editForm.baseCost,
          dinnerCost: this.editForm.dinnerCost,
          // materialCost: this.editForm.materialCost,
          cid: this.cid
        }).then(res => {
          this.$message.success('设置费用成功')
          this.getAllClass()
        })
          .catch(err => {
            this.$message.error('设置费用失败！')
          })
      },
      editSubmitForm() {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.editDialogFormVisible = false
            this.setAllCost()
          } else {
            alert('填写不符合要求')
            console.log('error submit!!')
            return false
          }
        })
      },
      handleClick(index, row) {
        // console.log(this.tableData[index].cid)
        this.cid = this.tableData[index].cid
        this.editDialogFormVisible = true
        this.editForm = Object.assign({}, row)
      }
    }
  }
</script>

<style scoped>
  .head-card {
    padding: 25px
  }

  .text {
    font-size: 20px;
    font-weight: bold;
  }

</style>
